<template>
  <div>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        prop="courseAndTeacherMsg.courseClassId"
        label="课程序号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="courseAndTeacherMsg.courseName"
        label="课程名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="courseAndTeacherMsg.classTime"
        label="课程安排"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="courseAndTeacherMsg.credit"
        label="学分"
        width="180"
      >
      </el-table-column>
      <el-table-column label="任课教师" width="180">
        <template slot-scope="scope">
          <el-link
            @click="teainfo(scope.row.courseAndTeacherMsg.teaInfoDTO)"
            type="primary"
            >{{ scope.row.courseAndTeacherMsg.teaInfoDTO.name }}</el-link
          >
        </template>
      </el-table-column>
      <!-- 已选人数 -->
      <el-table-column label="已选人数" width="180">
        <template slot-scope="scope">
          {{ scope.row.courseAndTeacherMsg.max-scope.row.remain }}/ {{ scope.row.courseAndTeacherMsg.max }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="push(scope.row.randomCode)"
            type="primary"
            >选课<i class=" el-icon-s-claim"></i
          ></el-button>
          <el-button
        
            size="mini"
            @click="tui(scope.row.randomCode)"
            type="info"
            >退课<i class=" el-icon-error"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="教师详细信息" :visible.sync="dialogVisible" width="30%">
      <el-descriptions
        v-if="dialogVisible"
        class="margin-top"
        :column="3"
        :size="size"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            照片
          </template>
          <el-image
            style="width: 100px; height: 100px"
            :src="teaInfo.photo"
            fit="fit"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            教师姓名
          </template>
          {{ this.teaInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            资质
          </template>
          {{ this.teaInfo.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ this.teaInfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地
          </template>
          {{ this.teaInfo.nativeplace }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            学校
          </template>
          <el-tag size="small">{{ this.teaInfo.schoolName }}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            所属院系
          </template>
          {{ this.teaInfo.collegeName }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import {
  stu_selection,
  stu_withdraw,
  get_stu_course
} from "@/api/releasecourse/course";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      tableData: JSON.parse(this.$route.query.course_list),
      dialogVisible: false,
      timer: null,
      time: this.$route.query.endtime || null
    };
  },
  methods: {
    ...mapActions("d2admin/page", [
      "close",
      "closeLeft",
      "closeRight",
      "closeOther",
      "closeAll",
      "openedSort"
    ]),
    //退课
    tui(randomCode) {
       //提示用户是否确认选课
      this.$confirm("确认选课吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          stu_withdraw({ randomCode: randomCode }).then(res => {
            if (res.statusCode == 200) {
              this.$message({
                type: "success",
                message: res.message
              });
              this.get_stu_course();
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消选课"
          });
        });
     
    },

    //获取已选课程
    get_stu_course() {
      get_stu_course().then(res => {
        yuxiuan = res.data.data;
        this.tableData.map((item, index) => {
          yuxiuan.map((item2, index2) => {
            if (item.courseAndTeacherMsg.courseId == item2.courseId) {
              console.log(item2.courseId);
              this.tableData[index].is_qian = true;
            }
          });
        });
      });
    },

    countDown() {
      console.log(this.time);
      var timedate = new Date(Date.parse(this.time.replace(/-/g, "/"))); //自定义结束时间
      var now = new Date(); //获取当前时间
      var date = (timedate.getTime() - now.getTime()) / 1000; //获取相差的秒数
      console.log(date);
      if (date < 0) {
        clearInterval(this.timer);
        this.timer = null;
        console.log("选课已结束");

        //跳转到选课结束页面
        this.$router.push({
          path: "/course_selection"
        });
        //删除头部菜单

        //发送数据到另一页面
      }
    },

    teainfo(val) {
      this.dialogVisible = true;
      this.teaInfo = val;
    },
    push(val) {
      //提示用户是否确认选课
      this.$confirm("确认选课吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          stu_selection({ randomCode: val }).then(res => {
            if (res.statusCode == 200) {
              this.$message({
                type: "success",
                message: res.message
              });
              this.get_stu_course();
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消选课"
          });
        });
    }
  },
  created() {
    if (this.time != null) {
      this.timer = setInterval(() => {
        console.log("正在计时");
        this.countDown();
      }, 1000);
    }
    this.get_stu_course()

  }
};
</script>

<style></style>
